import { Box, styled } from '@mui/material';
import MaterialLibs from './MaterialLibs';
import { MaterialParams } from './types';

const StyledLibraryBox = styled(Box)(() => ({
  display: 'flex',
  flexDirection: 'row',
  marginTop: '10px',
  '.MuiButtonBase-root': {
    height: '25px',
  },
  '.MuiInputBase-root': {
    height: '25px',
    fontSize: '14px',
    paddingLeft: '5px',
  },
}));

export default function MaterialLibrary({
  show,
  dxid,
  materials,
  faceIndex,
}: MaterialParams) {
  return (
    <>
      {show ? (
        <StyledLibraryBox>
          <MaterialLibs
            dxid={dxid}
            faceIndex={faceIndex}
            materials={materials}
          />
        </StyledLibraryBox>
      ) : (
        <></>
      )}
    </>
  );
}
